import { computed, readonly, ref } from 'vue'
import { defineStore, storeToRefs } from 'pinia'
import { useUserAgent } from '@/compositions/utils/ua'
import { useDialogStore } from './dialog'

export const useInstallTutorStore = defineStore('install-tutor', () => {
  const { installTutorDialog } = storeToRefs(useDialogStore())

  const STATE = {
    ANDROID_CHROME: { os: 'android', browser: 'chrome' },
    IOS_SAFARI: { os: 'ios', browser: 'safari' },
    IOS_CHROME: { os: 'ios', browser: 'chrome' },
  }

  const journey = {
    ios: {
      title: 'install.ios.title',
      switchTo: {
        text: 'install.ios.switch',
        state: STATE.ANDROID_CHROME,
      },
      safari: {
        subtitle: 'install.ios.safari.subtitle',
        steps: [
          {
            info: 'install.ios.safari.steps.1',
            image: '/images/install-tutor/ios/safari/step1.png',
            position: { bottom: '0.85rem', right: '4.8rem' },
          },
          {
            info: 'install.ios.safari.steps.2',
            image: '/images/install-tutor/ios/safari/step2.png',
            position: { bottom: '6.5rem', left: '0.75rem' },
          },
          {
            info: 'install.ios.safari.steps.3',
            image: '/images/install-tutor/ios/safari/step3.png',
            position: { left: '3.5rem', bottom: '9.7rem' },
          },
        ],
      },
      chrome: {
        subtitle: 'install.ios.chrome.subtitle',
        steps: [
          {
            info: 'install.ios.chrome.steps.1',
            image: '/images/install-tutor/ios/chrome/step1.png',
            position: { top: '2.25rem', right: '1.08rem' },
          },
          {
            info: 'install.ios.chrome.steps.2',
            image: '/images/install-tutor/ios/chrome/step2.png',
            position: { left: '1rem', top: '9.6rem' },
          },
          {
            info: 'install.ios.chrome.steps.3',
            image: '/images/install-tutor/ios/chrome/step3.png',
            position: { left: '3.5rem', bottom: '9.7rem' },
          },
        ],
      },
    },
    android: {
      title: 'install.android.title',
      switchTo: {
        text: 'install.android.switch',
        state: STATE.IOS_SAFARI,
      },
      chrome: {
        subtitle: 'install.android.chrome.subtitle',
        steps: [
          {
            info: 'install.android.chrome.steps.1',
            image: '/images/install-tutor/android/chrome/step1.png',
            position: { bottom: '6.2rem', right: '0.8rem' },
          },
          {
            info: 'install.android.chrome.steps.2',
            image: '/images/install-tutor/android/chrome/step2.png',
            position: { bottom: '4.85rem', right: '2.5rem' },
          },
          {
            info: 'install.android.chrome.steps.3',
            image: '/images/install-tutor/android/chrome/step3.png',
            position: { top: '7.45rem', right: '1.3rem' },
          },
        ],
      },
    },
  }

  const _os = ref('ios')
  const _browser = ref('safari')
  const closeAction = ref(null)

  const { isIOS, isSafari } = useUserAgent()

  function setupConfig() {
    _os.value = isIOS.value ? 'ios' : 'android'
    _browser.value = isSafari.value ? 'safari' : 'chrome'
  }

  const currentJourney = computed(() => journey[_os.value])
  const currentBrowser = computed(() => currentJourney.value[_browser.value])

  function open({ os, browser, onClose = null } = {}) {
    to({ os, browser })
    installTutorDialog.value = true
    onClose && typeof onClose === 'function' && (closeAction.value = onClose)
  }

  function to({ os, browser } = {}) {
    if (!os || !browser) {
      setupConfig()
      return
    }
    _os.value = os
    _browser.value = browser
  }

  function close() {
    installTutorDialog.value = false
    closeAction.value && closeAction.value()
  }

  return {
    STATE: readonly(STATE),
    isOpen: readonly(installTutorDialog),
    open,
    close,
    to,

    currentJourney,
    currentBrowser,
  }
})
